<template>
  <div class="login-zhuc">
    <div class="toubu">
      <span>跨行票据贴现</span>
    </div>
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="100px"
      class="login-form"
    >
      <h2 class="login-title">账号注册</h2>
      <el-form-item label="登录名:" prop="username" style="width: 411px">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="登录密码:" prop="password" style="width: 411px">
        <el-input
          type="password"
          v-model="form.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码:" prop="sPassword" style="width: 411px">
        <el-input
          type="password"
          v-model="form.sPassword"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号码:" prop="phone" style="width: 411px">
        <el-input type="text" clearable v-model="form.phone">
          <template slot="append"
            ><span
              v-show="show"
              @click="yanzm222"
              style="cursor: pointer; color: #157ef4"
              >获取验证码</span
            >
            <span v-show="!show" class="count">{{ count }} s</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="验证码:" style="width: 411px">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item label="">
        <slide-verify
          :l="42"
          :r="10"
          :w="310"
          :h="155"
          slider-text="向右滑动"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
        ></slide-verify>
        <!-- <div>{{ msg }}</div> -->
      </el-form-item>
      <el-form-item style="margin-left: 103px">
        <el-button type="primary" @click="onSubmit('form')">确认</el-button>
        <el-button @click="quxxx">取消</el-button>
      </el-form-item>
    </el-form>
    <div class="dibu">
      <div class="wenzi">
        <span>常见问题</span>
        <span style="margin-left: 20px">相关下载</span>
        <span style="margin-left: 20px"
          ><img class="mg" src="@/assets/potho.png" /> 025-5462-4833</span
        >
      </div>
      <div class="hm">
        <span>备案号 IVSHdsadshfksdfjds 苏州开博通联科技有限公司 版权所有</span>
      </div>
    </div>
  </div>
</template>
  <script>
import { encryption } from "@/common/util";
import { registeUser } from "@/api/leagues/app";
import qs from "qs";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.sPassword !== "") {
          this.$refs.form.validateField("sPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      show: true,
      count: "",
      timer: null,
      form: {
        username: "",
        password: "",
        sPassword: "",
        code: "",
        phone: "",
      },
      msg: "",
      rules: {
        username: [
          {
            required: true,
            message: "中文、数字或者字母,不超过10个字",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^[\u4E00-\u9FA5A-Za-z0-9]+$/.test(value) == false) {
                callback(new Error("中文、数字或者字母,不超过10个字"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            validator: validatePass,
            message: "由8-16位数字或大小字母组成",
            trigger: "blur",
          },
        ],
        sPassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        passwordword3: [{ required: true, trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
      },
    };
  },
  methods: {
    quxxx() {
      this.$router.push({ path: "/HomePage" });
    },
    yanzm222() {
      let obj = {
        phone: this.form.phone,
        isRegister:'1'
      };
      this.$fetch("/admin/user/getCodeForgetPassword?" + qs.stringify(obj)).then((res) => {
        if (res.code == 0) {
          this.form.code = res.data;
          const TIME_COUNT = 60;
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 700);
          }
          console.log(res, +"333");
        } else if (res.code == 1) {
          this.$message({
            duration: 600,
            message: res.msg,
            type: "error",
          });
        }
      });
    },

    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        const page = this.form;
        // const page = encryption({
        //   data: this.form,
        //   key: "kbaas,kaibocloud",
        //   param: ["password", "sPassword"],
        // });
        if (valid) {
          let password = this.form.password;
          // let reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,12}$/;
          let reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;
          // let username = this.form.username;
          // let usern = /^[^\u4e00-\u9fa5\uf900-\ufa2d\w\d]$/;
          // if (usern.test(username)) {
          //   this.$message("用户名由中文、数字或者字母组成，不超过10个字"),{
          //      type: 'error',};
          // }else
          if (!reg.test(password)) {
            this.$message(
              "密码必须是大写字母，小写字母，数字组成，且长度为8到16位！",
              {
                type: "error",
              }
            );
          } else {
            registeUser(page).then((response) => {
              if (response.data.code == 0) {
                // var that = this;
                this.$message({
                  duration: 600,
                  message: response.data.msg,
                  type: "success",
                });
                this.$router.push({
                  path: "/login",
                });
              } else if (response.data.code == 1) {
                this.$message({
                  duration: 600,
                  message: response.data.msg,
                  type: "error",
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    onSuccess() {
      this.msg = "";
    },
    onFail() {
      this.msg = "";
    },
    onRefresh() {
      this.msg = "";
    },
  },
};
</script>

<style scoped>
.login-form {
  width: 500px;
  margin: 60px auto; /* 上下间距160px，左右自动居中*/
  border-radius: 20px; /* 圆角 */
}
.toubu {
  width: 100%;
  height: 60px;
  background: #ffffff;
  /* position:fixed;top:0px; */
}
.mg {
  width: 20px;
  height: 22px;
}
.toubu span {
  width: 119px;
  height: 20px;
  font-size: 20px;
  font-weight: bold;
  color: #051232;
  line-height: 60px;
  margin-left: 3%;
}
.dibu {
  width: 100%;
  background: #262f3e;
  position: fixed;
  bottom: 0;
  height: 41px;
}
.wenzi {
  float: left;
  margin-left: 20px;
  margin-top: -5px;
}
.dibu span {
  width: 182px;
  height: 10px;
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  line-height: 53px;
}
.hm {
  float: right;
  margin-right: 29px;
  opacity: 0.2;
  margin-top: -5px;
}
/* 背景 */
.login-zhuc {
  position: absolute;
  width: 100%;
  /* height: 100%; */
  background-color: #f3f6f8;
}

/* 标题 */
.login-title {
  font-size: 25px;
  font-weight: 600;
  color: #33425d;
  position: relative;
  margin-left: -70%;
}
</style> 